﻿<%@ Page Title="出入流量包分析" Language="C#" MasterPageFile="~/AnalysisMaster.Master" AutoEventWireup="true" CodeBehind="InOutAnalysis.aspx.cs" Inherits="NetFlow.InOutAnalysis" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!-- 引入 Chart.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <div class="container-fluid">
        <h2 class="text-center mt-4">出入流量包分析</h2>

        <div class="row mt-4">
            <!-- 区域 1: 入方向和出方向的数据流量分析（柱状图） -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">入方向和出方向的数据流量分析</div>
                    <div class="card-body">
                        <canvas id="inOutBytesChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>

            <!-- 区域 2: 入方向和出方向的数据包数分析（柱状图） -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">入方向和出方向的数据包数分析</div>
                    <div class="card-body">
                        <canvas id="inOutPktsChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <!-- 区域 3: 入方向和出方向的数据流量变化趋势（折线图） -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">入方向和出方向的数据流量变化趋势</div>
                    <div class="card-body">
                        <canvas id="inOutBytesTrendChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>

            <!-- 区域 4: 入方向和出方向的数据包数变化趋势（折线图） -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">入方向和出方向的数据包数变化趋势</div>
                    <div class="card-body">
                        <canvas id="inOutPktsTrendChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof inOutData !== 'undefined' && typeof netFlowData !== 'undefined') {
                // 入方向和出方向的数据流量分析（柱状图）
                var ctx1 = document.getElementById('inOutBytesChart').getContext('2d');
                new Chart(ctx1, {
                    type: 'bar',
                    data: {
                        labels: ['In Bytes', 'Out Bytes'],
                        datasets: [{
                            label: '数据流量 (字节)',
                            data: [inOutData.InBytes, inOutData.OutBytes],
                            backgroundColor: ['rgba(54, 162, 235, 0.6)', 'rgba(255, 99, 132, 0.6)']
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // 入方向和出方向的数据包数分析（柱状图）
                var ctx2 = document.getElementById('inOutPktsChart').getContext('2d');
                new Chart(ctx2, {
                    type: 'bar',
                    data: {
                        labels: ['In Packets', 'Out Packets'],
                        datasets: [{
                            label: '数据包数',
                            data: [inOutData.InPkts, inOutData.OutPkts],
                            backgroundColor: ['rgba(54, 162, 235, 0.6)', 'rgba(255, 99, 132, 0.6)']
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // 入方向和出方向的数据流量变化趋势（折线图）
                var ctx3 = document.getElementById('inOutBytesTrendChart').getContext('2d');
                var timeLabels = netFlowData.map((_, index) => `时间 ${index + 1}`);
                var inBytesValues = netFlowData.map(item => item.InBytes);
                var outBytesValues = netFlowData.map(item => item.OutBytes);

                new Chart(ctx3, {
                    type: 'line',
                    data: {
                        labels: timeLabels,
                        datasets: [
                            {
                                label: 'In Bytes',
                                data: inBytesValues,
                                borderColor: 'blue',
                                fill: false
                            },
                            {
                                label: 'Out Bytes',
                                data: outBytesValues,
                                borderColor: 'red',
                                fill: false
                            }
                        ]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // 入方向和出方向的数据包数变化趋势（折线图）
                var ctx4 = document.getElementById('inOutPktsTrendChart').getContext('2d');
                var inPktsValues = netFlowData.map(item => item.InPkts);
                var outPktsValues = netFlowData.map(item => item.OutPkts);

                new Chart(ctx4, {
                    type: 'line',
                    data: {
                        labels: timeLabels,
                        datasets: [
                            {
                                label: 'In Packets',
                                data: inPktsValues,
                                borderColor: 'blue',
                                fill: false
                            },
                            {
                                label: 'Out Packets',
                                data: outPktsValues,
                                borderColor: 'red',
                                fill: false
                            }
                        ]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });
            } else {
                console.error("No data available.");
            }
        });
    </script>
</asp:Content>